/// 3d阴影文字
/// @param {color} $color - 字体颜色
/// @param {number} $x - x轴方向，范围[-1, 1]
/// @param {number} $y - y轴方向，范围[-1, 1]
/// @param {number} $darken - 阴影颜色深浅，范围[0.1, 2]
@mixin text3d($color: #ffd300, $x: 1, $y: -1, $darken: 1) {
  color: $color;
  text-shadow: 0px 0px 0 darken($color, 14%),
    $x * 1px $y * 1px 0 darken($color, $darken * 15),
    $x * 2px $y * 2px 0 darken($color, $darken * 16),
    $x * 3px $y * 3px 0 darken($color, $darken * 17),
    $x * 4px $y * 4px 0 darken($color, $darken * 18),
    $x * 5px $y * 5px 0 darken($color, $darken * 19),
    $x * 6px $y * 6px 0 darken($color, $darken * 20),
    $x * 7px $y * 7px 0 darken($color, $darken * 21),
    $x * 8px $y * 8px 0 darken($color, $darken * 22),
    $x * 9px $y * 9px 0 darken($color, $darken * 23),
    $x * 10px $y * 10px 0 darken($color, $darken * 24),
    $x * 11px $y * 11px 0 darken($color, $darken * 25),
    $x * 12px $y * 12px 0 darken($color, $darken * 26),
    $x * 13px $y * 13px 12px rgba(0, 0, 0, 0.55),
    $x * 13px $y * 13px 1px rgba(0, 0, 0, 0.5);
}

/// 谷歌字体导入混合 google web sass mixin
/// @param {list} $fonts - 字体名称，多个用空格隔开
/// @example
///   @include gwf("Roboto", "Roboto+Mono");
///   @include gwf("Roboto", "Roboto+Mono", "Roboto+Condensed");
@mixin gwf($fonts...) {
  $url: "https://fonts.googleapis.com/css?family=";
  $nb: 0;
  @each $font-name in $fonts {
    $nb: $nb + 1;
    $nb-word: 0;
    @each $word in $font-name {
      $nb-word: $nb-word + 1;
      $url: $url + $word;
      @if $nb-word < length($font-name) {
        $url: $url + "%2B";
      }
    }
    @if $nb < length($fonts) {
      $url: $url + "%7C";
    }
  }
  @import url(#{$url});
}
